<template>
	<view>
		<view class="promoter-list">
			<view class='headerBox'>
				<view class="" style="width: 48%;">
					<p class='name'>团队总人数（人）</p>
					<p class='money'>￥<text class='num'>{{total || 0}}</text></p>
				</view>
				<view class="xian"></view>
				<view class="" style="width: 48%;">
					<p class='name'>团队总业绩（元）</p>
					<p class='money'>￥<text class='num'>{{groupPerformance || 0}}</text></p>
				</view>

			</view>
			<!-- <view class='promoterHeader bg-color'>
				<view class='headerCon acea-row row-between' style="background: linear-gradient(to right, #639DFF, #498CFF);">
					<view>
						<view class='name'>团队总人数 <text class='num'>{{total}}</text>人</view>
						<view class='name'>团队总业绩 <text class='num'>{{groupPerformance}}</text>元</view>
					</view>
					<image class='extensionPeople' src="../../../static/myImages/extensionPeople.png" mode=""></image>
				</view>
			</view> -->
			<uni-search-bar class="searchBox_search" placeholder="搜索用户手机号" clearButton="none" cancelButton="none"
				v-model="phone" bgColor="#fff" @confirm="submitForm" confirm-type='search' name="search" />
			<view class="pad30" style="padding: 0rpx;">
				<view class='nav acea-row row-around' style="width: 40%;background-color: none;">
					<view :class="grade == 'one' ? 'item on' : 'item'" @click='setType("one")'>一级
					</view>
					<view :class="grade == 'two' ? 'item on' : 'item'" @click='setType("two")'>二级
					</view>
				</view>
				<!-- 	<view class="nav acea-row row-around">
					<view class="timeFilter">
						<p :class="{'selected': selectedTime === 'all'}" @click="selectTime('all')">全部</p>
						<p :class="{'selected': selectedTime === 'today'}" @click="selectTime('today')">今日</p>
						<p :class="{'selected': selectedTime === 'yesterday'}" @click="selectTime('yesterday')">昨日</p>
						<p :class="{'selected': selectedTime === 'last7days'}" @click="selectTime('last7days')">近七日</p>
						<uni-datetime-picker v-model="datetimerange" type="daterange" mode="daterange"
							rangeSeparator="至" @change="handleConfirm">
							<view class="fold" @click="openPicker">自定义时间</view>
						</uni-datetime-picker>
					</view>
				</view> -->
				<uni-datetime-picker v-model="datetimerange" type="daterange" mode="daterange" rangeSeparator="至"
					@change="handleConfirm">
					<view class="fold" @click="openPicker">自定义时间</view>
				</uni-datetime-picker>
				<view class='list'>
					<view class="sortNav acea-row row-middle">
						<view class="sortItem" @click='setSort(0)' v-if="sortType === 1">金额排序
							<image src='/static/images/sort1.png'></image>
						</view>
						<view class="sortItem" @click='setSort(1)' v-else-if="sortType === 0">金额排序
							<image src='/static/images/sort3.png'></image>
						</view>
						<view class="sortItem" @click='setSort(0)' v-else>金额排序
							<image src='/static/images/sort2.png'></image>
						</view>
						<view class="sortItem" @click='setSort(2)' v-if="sortType === 3">订单排序
							<image src='/static/images/sort1.png'></image>
						</view>
						<view class="sortItem" @click='setSort(3)' v-else-if="sortType === 2">订单排序
							<image src='/static/images/sort3.png'></image>
						</view>
						<view class="sortItem" @click='setSort(2)' v-else>订单排序
							<image src='/static/images/sort2.png'></image>
						</view>
					</view>
					<block v-for="(item,index) in recordList" :key="index">
						<view class='recordBox'>
							<view class="picTxt">
								<!-- <view class='pictrue'>
									<image :src='item.avatar'></image>
								</view> -->
								<view class='text'>
									<view class='name line1' style="margin-bottom: 10rpx;">
										昵称：{{item.inviteeMsqUser.nickname}} id:{{item.inviteeMsqUser.uid}}</view>
									<view style="margin-bottom: 10rpx;">电话: {{item.inviteeMsqUser.phone}}</view>
									<view>加入时间: {{item.createTime}}</view>
								</view>
							</view>
							<view class="right">
								<view><text class="num">{{item ? item.presonNum : 0}}</text>人</view>
								<view><text
										class="num">{{item.inviteeMsqUser ? item.inviteeMsqUser.buyCount : 0}}</text>单
								</view>
								<view><text
										class="num">{{item.inviteeMsqUser ? item.inviteeMsqUser.moneySum : 0}}</text>元
								</view>
							</view>
						</view>
					</block>
					<block v-if="recordList.length == 0 && isShow">
						<emptyPage title="暂无推广人～"></emptyPage>
					</block>
				</view>
			</view>
		</view>
		<home></home>
	</view>
</template>

<script>
	import {
		getOnePersonList,
		getTwoPersonList,
		getDetailedTeamSum
	} from '@/api/xing.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import emptyPage from '@/components/emptyPage.vue';
	import Loading from "@/components/Loading";
	import home from '@/components/home';

	export default {
		components: {
			Loading,
			emptyPage,
			home
		},
		data() {
			return {
				pageSize: 10,
				pageNum: 1,
				phone: '',
				sortType: '0', // 默认金额倒序
				grade: "one",
				recordList: [],
				isShow: false,
				selectedTime: 'all', // 默认选中“全部”
				datetimerange: ['', ''], // 初始值为空数组
				total: '0',
				groupPerformance: '0'
			};
		},
		mounted() {
			this.userSpreadNewList();
			getDetailedTeamSum().then(res => {
				this.total = res.data[0].value
				this.groupPerformance = res.data[1].value
			})
		},
		methods: {
			openPicker() {
				this.$refs.datetimePicker.show();
			},
			handleConfirm(e) {
				console.log('选择的日期范围:', e);
				this.datetimerange = e;
				this.userSpreadNewList()
			},
			selectTime(e) {
				this.selectedTime = e;
				this.userSpreadNewList();
			},
			onLoadFun(e) {
				this.userSpreadNewList();
			},
			authColse(e) {
				this.isShowAuth = e;
			},
			setSort(sortType) {
				this.sortType = sortType;
				this.pageSize = 10;
				this.pageNum = 1;
				this.recordList = [];
				this.userSpreadNewList();
			},
			submitForm() {
				this.pageSize = 10;
				this.pageNum = 1;
				this.recordList = [];
				this.userSpreadNewList();
			},
			setType(grade) {
				this.grade = grade;
				this.pageSize = 10;
				this.pageNum = 1;
				this.phone = '';
				this.sortType = 0; // 重置排序类型
				this.recordList = [];
				this.userSpreadNewList();
			},

			userSpreadNewList() {
				const params = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					sortType: this.sortType,
					phone: this.phone,
					beginDate: '',
					endDate: ''
				};

				// 只传递已设置的排序类型
				if (this.sortType === 0 || this.sortType === 1) {
					params.sortType = this.sortType;
				} else if (this.sortType === 2 || this.sortType === 3) {
					params.sortType = this.sortType;
				}

				// 处理日期范围
				if (this.datetimerange[0]) {
					params.beginDate = this.datetimerange[0];
				}
				if (this.datetimerange[1]) {
					params.endDate = this.datetimerange[1];
				}

				const apiMethod = this.grade === 'one' ? getOnePersonList : getTwoPersonList;
				apiMethod(params).then(res => {
					const recordListData = res.rows || [];
					const len = recordListData.length;
					this.recordList = [...this.recordList, ...recordListData];
					this.pageNum += 1;
					if (this.recordList.length === 0) this.isShow = true;
				});
			}
		},
		onReachBottom() {
			this.userSpreadNewList();
		}
	}
</script>
<style scoped lang="scss">
	.headerBox {
		width: 95%;
		height: 214rpx;
		background: linear-gradient(93deg, #639DFF 0%, #498CFF 100%);
		border-radius: 20rpx;
		color: #FFFFFF;
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding: 40rpx;
		display: flex;
		flex-wrap: nowrap;
		.xian{
			width: 2rpx;
			height: 60%;
			margin-top: 40rpx;
			background-color: #FCF4ED;
		}
		.name{
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 71rpx;
			margin-left: 40rpx;
		}
		.money{
			font-weight: bold;
			font-size: 46rpx;
			color: #FFFFFF;
			line-height: 71rpx;
			margin-left: 40rpx;
			
		}
	}

	.fold {
		width: 160rpx;
		height: 58rpx;
		float: right;
		background-color: #fff;
		line-height: 58rpx;
		border-radius: 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		margin: -60rpx 20rpx 0rpx 0rpx;
	}

	.recordBox {
		height: 180rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
		background-color: #fff;
		border-bottom: 2rpx solid #999999;
		margin: 0rpx 20rpx;

		.picTxt {
			width: 70%;
		}

		.right {
			text-align: right;
			width: 25%;
		}
	}

	.extensionPeople {
		width: 105rpx;
		height: 92rpx;
	}

	.searchBox_search {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 70rpx !important;
	}

	.promoter-list .nav {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
	}

	.timeFilter {
		width: 100%;
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding: 26rpx 32rpx;

		p {
			width: 92rpx;
			height: 48rpx;
			border-radius: 24rpx;
			font-weight: 600;
			font-size: 26rpx;
			text-align: center;
			line-height: 48rpx;
			margin-right: 10rpx;
			color: #999999;
			background: #F5F5F5;
		}

		.selected {
			background: #FFEEEA;
			color: #085CD6;
		}
	}

	.promoter-list .nav .item.on {
		border-bottom: 5rpx solid #085CD6;
		color: #085CD6;
	}

	.promoter-list .search {
		width: 100%;
		background-color: #085CD6;
		height: 100rpx;
		padding: 0 24rpx;
	}

	.promoter-list .search .input {
		width: 686rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background-color: #f5f5f5;
		text-align: center;
	}

	.promoter-list .search .input input {
		width: 686rpx;
		height: 100%;
		font-size: 26rpx;
		width: 610rpx;
		text-align: center;
	}

	.promoter-list .search .input .placeholder {
		color: #bbb;
	}

	.promoter-list .search .input .iconfont {
		position: absolute;
		right: 28rpx;
		color: #999;
		font-size: 28rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.promoter-list .search .iconfont {
		font-size: 32rpx;
		color: #515151;
		height: 60rpx;
		line-height: 60rpx;
	}

	.promoter-list .list {
		margin-top: 20rpx;
	}

	.promoter-list .list .sortNav {
		background-color: #fff;
		height: 76rpx;
		border-bottom: 1rpx solid #eee;
		color: #333;
		font-size: 28rpx;
		border-top-left-radius: 14rpx;
		border-top-right-radius: 14rpx;
		margin: 0rpx 20rpx;
	}

	.promoter-list .list .sortNav .sortItem {
		text-align: center;
		flex: 1;
		position: relative;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.promoter-list .list .sortNav .sortItem image {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
		vertical-align: middle;
	}
</style>